<template>
    <div :class="$hasEditPermission('/BHView') ? '' : 'maskDisabled1'" class="tabs-cps-view">
        <tabFiveTabelShow v-if="isShow" type="of" title="報告書フォルダ" @close="isShow = false" @getResponse="getResponse">
        </tabFiveTabelShow>
        <ImportDialogForPic v-if="isUpShow" :_api="api" @close="isUpShow = false" :title="title"
            @getResponse="getResponse" :type="2">
        </ImportDialogForPic>
        <div class="tips">
            <span>関連図書</span>
            <div v-if="$hasEditPermission('/BHView')">
                <el-button type="default" size="mini" @click="isShow = true">フォルダーを開く</el-button>
                <el-button type="default" size="mini" @click="isUpShow = true"><i class="iconfont"
                        style="font-size:16px;">&#xe825;</i>アップロード</el-button>
                <el-button type="default" size="mini" @click="downLoadFn"><i style="font-size:20px;"
                        class="iconfont"></i>ダウンロード</el-button>
            </div>
        </div>
        <ux-grid :class="$hasEditPermission('/BHView') ? '' : 'maskDisabled2'" ref="singleTable" :data="prposTabelData" style="width: 100%" :header-cell-style="{
            color: 'rgba(0, 0, 0, 0.85)',
            fontSize: '14px',
            textAlign: 'left',
            fontWeight: 'bold',
            padding: 0,
            height: '32px',
        }" :cell-style="{
            color: 'rgba(96,98,102,1)',
            fontSize: '14px',
            textAlign: 'left',
            padding: 0,
            height: '32px',
        }" :row-style="{
            color: 'rgba(96,98,102,1)',
            fontSize: '13px',
            textAlign: 'left',
            padding: 0,
            height: '32px',
        }" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight" v-loading="loading"
            element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
            :element-loading-text="$t('message.bhView.loading')">
            <template slot="empty"> No data </template>
            <ux-table-column property="wrk_cls_name" :title="$t('message.rightMessage.tab3.label_3')">

                <template slot-scope="scope">
                    <el-input v-model="scope.row.booktit"
                        @input="scope.row.booktit = $setMaxLength(scope.row.booktit, 25)"></el-input>
                </template>
            </ux-table-column>
            <ux-table-column property="wrk_cls_name" :title="$t('message.rightMessage.tab3.label_4')">

                <template slot-scope="scope">
                    <p>{{ scope.row.fileName }}</p>
                </template>
            </ux-table-column>
            <ux-table-column property="wrk_cls_name" :title="$t('message.rightMessage.tab3.label_5')" width="140">

                <template slot-scope="scope">
                    <el-button type="text" @click="delFn(scope.row)">{{
                        $t("message.public.delete")
                        }}</el-button>
                </template>
            </ux-table-column>
        </ux-grid>

    </div>
</template>

<script>
import $ from "jquery";
import { getResOfferBookAssociationData, UpdResOfferBookAssociationDataVerify, UpdResOfferBookAssociationData, delThckDeterminatorTipsMsg, getFileTit, GetNoFileTipsMsg } from "@/api/api";
import tabFiveTabelShow from '@/components/TabelLineCadViews/BSDetailConmpontents/tabFiveTabelShow.vue'
import ImportDialogForPic from '@/components/Excel/ImportDialog/ImportDialogForPic.vue';
import { getLocalStorage } from "@/utils/storage";
import _ from 'lodash-es';
import eventBus from "@/eventBus/bus";
export default {
    name: "Tab_4",
    props: {
        offerComboxData: Object,
        tableSelectRow: Object,
    },
    data() {
        return {
            prposTabelData: [],
            prposTabelDataClone: [],
            tableHeight: 350,
            loading: false,
            import_dialog_flag: false,
            dateValue: this.tableSelectRow.ssn_date,
            isShow: false,
            isUpShow: false,
            api: '/api/Visual/UpLoadResOfferBookAssFile',
            title: '報告書フォルダ',
            currentItem: {}
        };
    },
    components: {
        tabFiveTabelShow, ImportDialogForPic
    },

    computed: {
        macCodeValue() {
            return this.$store.state.macCode;
        },
    },

    watch: {
        macCodeValue: {
            deep: true,
            handler: function (newV, oldV) {
                this.getResOfferBookAssociationDataApi();
            },
        },

        tableSelectRow: {
            deep: true,
            immediate: true,
            handler: function (newV, oldV) {
                this.dateValue = this.tableSelectRow.ssn_date;
                this.getResOfferBookAssociationDataApi();
            },
        },
        prposTabelData: {
            deep: true,
            handler: function (newV, oldV) {

                if (newV.length != this.prposTabelDataClone.length) {
                    this.$emit('DataChangeFn', true)
                    return
                }
                // newV.forEach((item, index) => {
                //     this.prposTabelDataClone[index]._XID = item._XID;
                //     Object.keys(item).forEach((key) => {

                //         if (newV[index][key] == '') {
                //             this.prposTabelDataClone[index][key] = '';
                //         }
                //     })
                // })
                console.log("tab3", newV, this.prposTabelDataClone);
                this.$emit('DataChangeFn', !_.isEqual(newV, this.prposTabelDataClone))
            },
        },
    },
    methods: {
        reSetTableFn(){
            this.$refs.singleTable.refreshColumn();    
        },  
        saveFn(isSaveBtn) {
            let D = {
                Account: getLocalStorage("userName"),
                SsnDate: this.dateValue,
                DmgCode: this.$store.state.macCode,
                DataList: this.prposTabelData,
            }

            return D

            let tipMSG = "変更内容を保存します、宜しいですか?";
            this.$confirm(tipMSG, '', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(async () => {
                this.$emit('isConfirmingFn', false);
                let D = {
                    Account: getLocalStorage("userName"),
                    SsnDate: this.dateValue,
                    DmgCode: this.$store.state.macCode,
                    DataList: this.prposTabelData,
                }
                let R = await UpdResOfferBookAssociationDataVerify(D);
                if (!R || R.data.code == 452) {
                    //  导航条误
                    eventBus.$emit('isNavChangeErrorFn');
                    //  搜索框索引误
                    eventBus.$emit('backParamsForLeftView');
                    return
                }
                let res = await UpdResOfferBookAssociationData(D);
                if (!res || res.data.code == 452) {
                    //  导航条误
                    eventBus.$emit('isNavChangeErrorFn');
                    //  搜索框索引误
                    eventBus.$emit('backParamsForLeftView');
                    return
                }
                if (res.data.code != 0) {
                    this.$alert(res.data.msg, '', {
                        confirmButtonText: 'OK',
                        type: 'warning',
                    });
                    //  导航条误
                    eventBus.$emit('isNavChangeErrorFn');
                    //  搜索框索引误
                    eventBus.$emit('backParamsForLeftView');
                    return
                }

                setTimeout(() => {
                    if (isSaveBtn) {
                        this.$message({
                            type: 'success',
                            message: 'OK'
                        });
                        this.getResOfferBookAssociationDataApi();
                    } else {
                        this.$store.state.isCurrentFn()

                        this.$store.commit("reSetIsCurrent");
                    }
                }, 500);
            }).catch(() => {
                this.$emit('isConfirmingFn', false);
                if (isSaveBtn) {
                    return
                }
                this.$store.state.isCurrentFn();
                this.$store.commit("reSetIsCurrent");
            });


        },
        async delFn(item) {
            // let R = await delThckDeterminatorTipsMsg({})
            // this.$confirm(R.data.msg, '', {
            //     confirmButtonText: 'OK',
            //     cancelButtonText: 'Cancel',
            //     type: 'warning'
            // }).then(async () => {
            //     this.prposTabelData = this.prposTabelData.filter(i => i.bookNo != item.bookNo);
            // }).catch(() => {
            // });
            this.prposTabelData = this.prposTabelData.filter(i => i.bookNo != item.bookNo);
        },
        async getFileTitFn() {
            let dataJson = {};
            let res = await getFileTit(dataJson);
            return res.data.data;
        },
        async getResponse(arr) {
            // this.$message.success("OK");
            let booktit = await this.getFileTitFn();
            arr.forEach(item => {
                this.prposTabelData.push({
                    name: `${item.name}.${item.ext}`,
                    fileName: item.showPath || item.name,
                    bookNo: this.prposTabelData.length + 1,
                    bookPath: item.path,
                    booktit: `${booktit}${this.prposTabelData.length + 1}`,
                    fileId: item.id,
                    ssnDate: this.dateValue,
                })
            })
        },

        handleCurrentChange(val) {
            console.log(val);
            this.currentItem = val;
        },
        downLoadFn() {
            if (this.prposTabelData.length == 0 || !this.currentItem.bookPath) {
                return
            }
            this.$downFileByBlob({ path: this.currentItem.bookPath, isDown: true, fileName: this.currentItem.name, isOpenNewBlank: false })

        },
        getResOfferBookAssociationDataApi() {
            let temp = {
                dmgCode: this.$store.state.macCode,
                ssnDate: this.dateValue,
            };

            getResOfferBookAssociationData(temp).then((res) => {
                console.log("getResOfferBookAssociationData =-=-=-=- ", res);
                this.prposTabelData = [];
                this.prposTabelDataClone = _.cloneDeep([]);
                if (res.data.code == 0) {
                    this.prposTabelData = res.data.data;
                    this.prposTabelDataClone = _.cloneDeep(res.data.data);

                    // this.currentItem = this.prposTabelData[0];
                }
            });
        },
    },
    created() {
        let that = this;
        this.$nextTick(function () {
            let heightStyle = $(".right-cps-view").height() - 88;
            that.tableHeight = heightStyle;
        });
        // this.getResOfferBookAssociationDataApi();
    },
    mounted() {
        let that = this;
        window.addEventListener(
            "resize",
            () => {
                return (() => {
                    let heightStyle = $(".right-cps-view").height() - 88;
                    that.tableHeight = heightStyle;
                })();
            },
            false
        );
        // this.getResOfferBookAssociationDataApi();
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>

<style lang="scss" scoped>
.tabs-cps-view {
    width: 100%;

    // .title {
    //     width: 100%;
    //     height: 32px;
    //     display: flex;
    //     align-items: center;
    //     justify-content: space-between;
    //     margin-bottom: 12px;

    //     .add-btn {
    //         height: 32px;
    //         background: #106ebe;
    //         color: #fff;
    //         border-radius: 4px;
    //     }
    // }
    .tips {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        font-weight: 700;

        .el-button {
            height: 28px;
            line-height: 0px;
            line-height: 0;
            height: 28px !important;
            width: 140px !important;
            margin: 0 0 0 10px;
        }
    }
}

// ::v-deep .elx-table .elx-body--row.row--checked,
// ::v-deep .elx-table .elx-body--row.row--current,
// ::v-deep .elx-table .elx-body--row.row--radio {
//     background: rgb(233, 236, 237);
// }

::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
    border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
    box-shadow: none;
}

.r-describe {
    display: flex;
    align-items: center;

    .el-icon-upload2,
    .el-icon-download,
    .el-icon-delete-solid,
    .el-icon-refresh {
        font-size: 24px;
        margin: 0 8px;
        cursor: pointer;
    }
}

.black-btn {
    padding: 0 8px;
    height: 32px;
    font-size: 14px;
    // color: rgba(0, 0, 0, 0.65);
    border-radius: 4px;
    font-weight: 500;
    margin: 0 8px;
    border: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    line-height: 0;

    span {
        // margin: 0 0 0 8px;
    }
}

::v-deep .el-input__inner {
    background: none;
    border: 0 none;
    padding: 0;
}
</style>
